<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-row shadow="hover" class="ml10">
				<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="">
					<el-form-item label="用户信息">
						<el-input v-model="queryParams.search" placeholder="输入昵称/姓名/用户ID查找"></el-input>
					</el-form-item>
					<el-form-item label="手机号">
						<el-input v-model="queryParams.phone" placeholder="输入用户手机号"></el-input>
					</el-form-item>
					<el-form-item label="用户类型">
						<el-select v-model="queryParams.userType" placeholder="全部类型">
							<el-option v-for="item in userTypeList" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="账号状态">
						<el-select v-model="queryParams.userStatus" placeholder="全部状态">
							<el-option v-for="item in userStatus" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="活跃状态">
						<el-select v-model="queryParams.activeDays" placeholder="全部状态">
							<el-option v-for="item in activeState" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="产商类型">
						<el-select v-model="queryParams.mfrType" placeholder="产商类型">
							<el-option v-for="item in categoryidDescList" :key="item.value" :label="item.name" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="注册时间">
						<el-date-picker v-model="datePickerValue" type="daterange" value-format="YYYY-MM-DD HH:mm:ss"
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button class="ml10" type="primary" icon="search" size="mini" @click="handleQuery"> 查询 </el-button>
						<el-button icon="Refresh" size="mini" @click="resetQuery"> 重置 </el-button>
					</el-form-item>
				</el-form>
			</el-row>
			<el-table v-loading="loading" :data="list" style="width: 100%" border
				:header-cell-style="{ background: '#f5f7fa!important', color: '#000' }">
				<el-table-column label="序号" type="index" align="center" width="80"> </el-table-column>
				<el-table-column label="用户ID" align="center" prop="id" width="180" />
				<el-table-column label="昵称" align="center" prop="nikename" width="180" />
				<el-table-column label="注册IP" align="center" prop="ip" width="120" show-overflow-tooltip> </el-table-column>

				<el-table-column label="实名状态" align="center" prop="nikename" width="180">
					<template #default="scope">
						<span v-if="scope.row.realStatus == null">未认证</span>
						<span v-else>{{ scope.row.realStatus }}</span>
					</template>
				</el-table-column>
				<el-table-column label="姓名" align="center" prop="name" width="120"> </el-table-column>
				<el-table-column label="手机号" align="center" prop="mobile" width="140"> </el-table-column>
				<el-table-column label="用户类型" align="center" prop="userTypeDesc" width="120" />
				<el-table-column label="当前登录手机型号" align="center" prop="mobileVersion" width="160" />
				<el-table-column label="注册时间" align="center" prop="registerTime" width="180"> </el-table-column>
				<el-table-column label="账号违规次数" align="center" prop="violationCount" width="180" />
				<el-table-column label="风险等级" align="center" prop="latestRiskLevelDesc" width="180" />
				<el-table-column label="产商类型" align="center" prop="mfrTypeDesc" width="180" />
				<el-table-column label="被投诉次数" align="center" prop="reportCount" width="180" />
				<el-table-column label="账号状态" align="center" prop="userStatusDesc" width="180" />
				<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
					<template #default="scope">
						<el-button link icon="" @click="banUser(scope.row)" type="primary" v-if="scope.row.userStatus == 'Y'"> 封禁
						</el-button>
						<el-button link icon="" @click="unbanUser(scope.row)" type="primary" v-if="scope.row.userStatus == 'B'">解封
						</el-button>
						<el-button link icon="" @click="details(scope.row)" type="primary"> 详情 </el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination class="paginationdDom" background @size-change="handleSizeChange"
				@current-change="handleCurrentChange" :current-page="queryParams.current" :page-size="queryParams.size"
				:layout="layout" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
import { appUserAdminPage, banUser, unbanUser, dictItemPage } from '/@/api/admin/content';
import { useMessage } from '/@/hooks/message';
export default {
	name: 'Online',
	data() {
		return {
			layout: 'total, sizes, prev, pager, next, jumper',
			total: 100,
			datePickerValue: [],
			form: {},
			activeState: [
				{
					value: '',
					label: '全部状态',
				},
				{
					value: 3,
					label: '三天内活跃',
				},
				{
					value: 7,
					label: '七天内活跃',
				},
				{
					value: 30,
					label: '三十内活跃',
				},
			],
			riskLevel: [
				{
					value: '',
					label: '全部',
				},
				{
					value: 'high',
					label: '高风险',
				},
				{
					value: 'medium',
					label: '中风险',
				},
				{
					value: 'low',
					label: '低风险',
				},
				{
					value: 'none',
					label: '无风险',
				},
			],
			userTypeList: [
				{
					value: '',
					label: '全部类型',
				},
				{
					value: 'TU',
					label: '临时用户',
				},
				{
					value: 'PU',
					label: '普通用户',
				},
				{
					value: 'AU',
					label: '审核用户',
				},
				{
					value: 'VPU',
					label: 'vip用户',
				},
				{
					value: 'SVPU',
					label: 'svip用户',
				},
			],
			userStatus: [
				{
					value: '',
					label: '全部状态',
				},
				{
					value: 'B',
					label: '封禁',
				},
				{
					value: 'C',
					label: '注销',
				},
				{
					value: 'Y',
					label: '正常',
				},
			],
			// 遮罩层
			loading: false,
			// 总条数
			total: 0,
			// 表格数据
			list: [],
			// 查询参数
			detailsInfo: {},
			categoryidDescList:[],
			queryParams: {
				// startTime: '',
				// endTime: '',
				current: 1,
				size: 10,
			},
		};
	},
	created() {
		this.appUserAdminPage();
	},
	mounted(){
		this.dictItemPage()
	},
	methods: {
		dictItemPage() {
			let data = {
				ascs: '',
				current: 1,
				descs: '',
				dictId: '1954807034756272130',
				dictType: 'mfr_type',
			};
			dictItemPage(data).then((res) => {
				for (let item of res.data.records) {
					let resData = {
						value: item.value,
						name: item.label,
					};
					this.categoryidDescList.push(resData);
				}
			});
		},
		handleSizeChange(val) {
			this.queryParams.size = val;
			this.queryParams.current = 1; //调整每页数目时，重置当前页，避免当前显示在不存在的页数
			this.appUserAdminPage(); //调接口，更新数据
		},
		// 更改当前页
		handleCurrentChange(val) {
			this.queryParams.current = val;
			this.appUserAdminPage(); //调接口，更新数据
		},
		appUserAdminPage() {
			this.loading = true;
			let data = this.queryParams;
			appUserAdminPage(data).then((response) => {
				this.list = response.data.records;
				this.total = response.data.total;
				this.loading = false;
				
			});
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.registerStartTime = this.datePickerValue[0];
			this.queryParams.registerEndTime = this.datePickerValue[1];
			this.appUserAdminPage();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.queryParams = this.$options.data().queryParams;
			this.datePickerValue = [];
			this.appUserAdminPage();
		},
		banUser(row) {
			let data = {
				id: row.id,
			};
			banUser(data).then((response) => {
				this.appUserAdminPage();
			});
		},
		unbanUser(row) {
			let data = {
				id: row.id,
			};
			unbanUser(data).then((response) => {
				this.appUserAdminPage();
			});
		},
		details(row) {
			this.$router.push({ path: '/AppUserManage/details/index', query: { id: row.id, userId: row.userId } });
		},
	},
};
</script>
<style lang="scss" scoped>
.dialogDom {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;

	>div {
		width: 30%;
		margin-right: 2%;
		margin-bottom: 2%;
	}
}

.dialogDiv {
	margin-bottom: 2%;
}

.linkDiv {
	white-space: pre-wrap;
	word-wrap: break-word;
	text-align: justify;
}
</style>
